
import React from 'react';
import {Layout,Row,Col,Card,Form, Icon, Input, Button,Select,message,Spin,Steps 	} from 'antd';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import FooterMsg from 'component/footermsg/index.jsx';

import MMUtile from 'util/mm.jsx'
import Safty from 'service/safty-service.jsx';

import './style.css'

const _mm = new MMUtile();
const _safty = new Safty();

const { Header, Content, Footer, Sider } = Layout; 
const FormItem = Form.Item;
const Step = Steps.Step;
const Option = Select.Option;

const steps = [{
  title: '第一步：填写使用过的密码'
}, {
  title: '第二步：填写设置过的密保'
}, {
  title: '第三步：填写基本资料'
}];

class AccountAppealForm extends React.Component{
	constructor(props){
		super(props);
		this.state={
			current:0,
			word:'',
			loading:false,
			validate:false,
			question1:'',
			question2:'',
			question3:'',
			password1:'',
			password2:'',
			password3:'',
			answer1:'',
			answer2:'',
			answer3:''
		}
	}
	next(){
    const current = this.state.current + 1;
    let form = this.props.form;
    this.setState({ current });
    if(current ===1){
			this.setState({
				password1:form.getFieldsValue().password1,
				password2:form.getFieldsValue().password2,
				password3:form.getFieldsValue().password3
			})
    }else{
			this.setState({
				answer1:form.getFieldsValue().answer1,
				answer2:form.getFieldsValue().answer2,
				answer3:form.getFieldsValue().answer3
			})
    }
  }
  prev(){
    const current = this.state.current - 1;
    this.setState({ current });
  }
  nextEvents(e){
			this.setState({
				loading:true
			})
  	//获取申诉
		_safty.verifyUsernameOrPhoneOrEmail({
			word:this.state.word
		}).then((res)=>{
			this.setState({
				validate:true,
				loading:false
			})
			//获取密保问题
			_safty.getUserEncrypted({
				word:this.state.word
			}).then((res)=>{
				this.setState({
					question1:res.question1,
					question2:res.question2,
					question3:res.question3
				})
			},(errMsg)=>{
				_mm.errorTips(errMsg)
			})
		},(errMsg)=>{
				this.setState({
					loading:false
				})
			_mm.errorTips(errMsg)
		})
  }
  saveVal(item,e){
  	
  }
  setWord(e){
		this.setState({word:e.target.value});
  }
  handleSubmit(e){
  	this.setState({
			loading:true
		})
	  e.preventDefault();
	  this.props.form.validateFields((err, values) => {
	    if (!err) {

				_safty.saveUserAppealMessage({
					word:this.state.word,
					answer1:this.state.answer1,
					answer2:this.state.answer2,
					answer3:this.state.answer3,
					nickName:values.nickName,
					idcard:values.idcard,
					password1:this.state.password1,
					password2:this.state.password2,
					password3:this.state.password3,
					contactEmail:values.contactEmail,
					city:values.city
				}).then((res)=>{
					this.setState({
						loading:false
					})
					this.props.history.push('/login');
					message.success('申诉资料提交成功');
				},(errMsg)=>{

					this.setState({
						loading:false
					})
					_mm.errorTips(errMsg);
				})
	    }else{
	    	message.error('请输入正确数据');
	    	this.setState({
					loading:false
				})
	    }
	  });
  }
  checkEmail(rule, value, callback){
    const form = this.props.form;
    let reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
    const contactEmail = form.getFieldValue('contactEmail')
    if(!(reg.test(contactEmail))){ 
        callback("邮箱填写有误，请重填");  
    }  else {
      callback();
    }
  }

	render(){
		const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    let winheight =document.body.clientHeight;
    let margintop = (winheight-620)>0?(winheight-620)/2:0;
    const { current } = this.state;
		return (
			<Layout  className="layoutbox">
				<Header  className="headerbox" >
	        <Row >
	          <Col span={24}><img width={300} src={require('img/logo.jpg')} /></Col>
	        </Row>
	      </Header>	
	      <Layout className="layoutbox">
	        <Content className="containerbox" style={{height:winheight-220}}>
	        	<Spin  spinning={this.state.loading}  size="large">
						{
							!this.state.validate
							?
							<Row style={{marginTop:margintop}}>
		        		<Col span={12}offset={6}>
		        			<p>账号申诉是指通过提交个人资料及帐号使用信息来证明您是帐号主人的方式。申诉成功后可修改密码或密保。申诉结果一般会在两个工作日内发到您的联系邮箱。</p>
		        			<p><Input placeholder="用户名|手机号|电子邮箱" onBlur={this.setWord.bind(this)} /></p>
									<Button type="primary" onClick={this.nextEvents.bind(this)} >提交</Button>
		        		</Col>
							</Row>
				      :
							<div>
								<Form onSubmit={(e)=>{this.handleSubmit(e)}}> 
					        <Steps current={current}>
					          {steps.map(item => <Step key={item.title} title={item.title} />)}
					        </Steps>
					        <div className="steps-content" >

					        {
										this.state.current==0
										?
										<Row>
					        		<Col span={12}offset={6}>
					        			<Card title="您曾经使用过的密码" className="cardnewborder">
													<FormItem
									          {...formItemLayout}
									          label={(
									            <span>
									              密码1
									            </span>
									          )}
									          hasFeedback
									        >
									          {getFieldDecorator('password1',{
									          	initialValue:this.state.password1
									          })(
									            <Input  onBlur={this.saveVal.bind(this,'password1')}  />
									          )}
									        </FormItem>	
													<FormItem
									          {...formItemLayout}
									          label={(
									            <span>
									              密码2
									            </span>
									          )}
									          hasFeedback
									        >
									          {getFieldDecorator('password2',{
									          	initialValue:this.state.password2
									          })(
									            <Input  onBlur={this.saveVal.bind(this,'password2')}  />
									          )}
									        </FormItem>	
													<FormItem
									          {...formItemLayout}
									          label={(
									            <span>
									              密码3
									            </span>
									          )}
									          hasFeedback
									        >
									          {getFieldDecorator('password3',{
									          	initialValue:this.state.password3
									          })(
									            <Input onBlur={this.saveVal.bind(this,'password3')}  />
									          )}
									        </FormItem>	
									       </Card>
					        		</Col>
										</Row>
										:(
											this.state.current==1
											?
											<Row >
						        		<Col span={12}offset={6}>
						        			<Card title="您曾经设置过的密保"  className="cardnewborder">
														<FormItem
									          {...formItemLayout}
									          label="问题1"
										        >
										          {getFieldDecorator('question1', {
										            initialValue:this.state.question1,
										          })(
										            <Select >
														      <Option value="">请选择</Option>
														      <Option value="A" >您的父亲的姓名?</Option>
														      <Option value="B" >您的母亲的姓名?</Option>
														      <Option value="C" >您的小学班主任的姓名?</Option>
														      <Option value="D" >您的小学学校名称?</Option>
														      <Option value="E" >您的中学学校名称?</Option>
														      <Option value="F" >您的配偶的姓名?</Option>
														      <Option value="G" >您的生日是?</Option>
														      <Option value="H" >您的父亲的生日?</Option>
														      <Option value="I" >您的母亲的生日?</Option>
														    </Select>
										          )}
										        </FormItem>
														<FormItem
															{...formItemLayout}
										          label="答案">
										          {getFieldDecorator('answer1',{
									          	initialValue:this.state.answer1
									          })(
										          <Input placeholder="请输入答案" />)}
										        </FormItem>

														<FormItem
									          {...formItemLayout}
									          label="问题2"
										        >
										          {getFieldDecorator('question2', {
										            initialValue:this.state.question2,
										          })(
										            <Select >
														      <Option value="">请选择</Option>
														      <Option value="A" >您的父亲的姓名?</Option>
														      <Option value="B" >您的母亲的姓名?</Option>
														      <Option value="C" >您的小学班主任的姓名?</Option>
														      <Option value="D" >您的小学学校名称?</Option>
														      <Option value="E" >您的中学学校名称?</Option>
														      <Option value="F" >您的配偶的姓名?</Option>
														      <Option value="G" >您的生日是?</Option>
														      <Option value="H" >您的父亲的生日?</Option>
														      <Option value="I" >您的母亲的生日?</Option>
														    </Select>
										          )}
										        </FormItem>
														<FormItem
															{...formItemLayout}
										          label="答案">
										          {getFieldDecorator('answer2',{
									          	initialValue:this.state.answer2
									          })(
										          <Input placeholder="请输入答案" />)}
										        </FormItem>

														<FormItem
									          {...formItemLayout}
									          label="问题3"
										        >
										          {getFieldDecorator('question3', {
										            initialValue:this.state.question3,
										          })(
										            <Select >
														      <Option value="">请选择</Option>
														      <Option value="A" >您的父亲的姓名?</Option>
														      <Option value="B" >您的母亲的姓名?</Option>
														      <Option value="C" >您的小学班主任的姓名?</Option>
														      <Option value="D" >您的小学学校名称?</Option>
														      <Option value="E" >您的中学学校名称?</Option>
														      <Option value="F" >您的配偶的姓名?</Option>
														      <Option value="G" >您的生日是?</Option>
														      <Option value="H" >您的父亲的生日?</Option>
														      <Option value="I" >您的母亲的生日?</Option>
														    </Select>
										          )}
										        </FormItem>
														<FormItem
															{...formItemLayout}
										          label="答案">
										          {getFieldDecorator('answer3',{
									          	initialValue:this.state.answer3
									          })(
										          <Input placeholder="请输入答案" />)}
										        </FormItem>
										       </Card>
						        		</Col>
											</Row>
											:
											<Card title="您曾经使用过的密码" className="cardnewborder">
												<FormItem
								          {...formItemLayout}
								          label={(
								            <span>
								              昵称
								            </span>
								          )}
								          hasFeedback
								        >
								          {getFieldDecorator('nickName')(
								            <Input placeholder="请输入昵称" />
								          )}
								        </FormItem>	
												<FormItem
								          {...formItemLayout}
								          label={(
								            <span>
								              证件号
								            </span>
								          )}
								          hasFeedback
								        >
								          {getFieldDecorator('idcard')(
								            <Input  placeholder="请输入证件号码" />
								          )}
								        </FormItem>	
												<FormItem
								          {...formItemLayout}
								          label={(
								            <span>
								              常登录城市
								            </span>
								          )}
								          hasFeedback
								        >
								          {getFieldDecorator('city')(
								            <Input  placeholder="请输入您经常登录的城市" />
								          )}
								        </FormItem>	
								        <FormItem
								          {...formItemLayout}
								          label={(
								            <span>
								              需要反馈的邮箱
								            </span>
								          )}
								          hasFeedback
								        >
								          {getFieldDecorator('contactEmail',{
								          	rules: [{ validator: this.checkEmail.bind(this) }]
								          })(
								            <Input  placeholder="请输入申诉资料反馈的邮箱地址" />
								          )}
								        </FormItem>
								       </Card>
										)
					        }
					        </div>
					        <div className="steps-action">
					          {
					            this.state.current < steps.length - 1
					            &&
					            <Button type="primary" onClick={() => this.next()}>下一步</Button>
					          }
					          {
					            this.state.current === steps.length - 1
					            &&
					            <Button type="primary"  htmlType="submit" className="login-form-button">完成</Button>
					          }
					          {
					            this.state.current > 0
					            &&
					            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
					              上一步
					            </Button>
					          }
					        </div>
						     </Form>
				      </div>
						}
	        	</Spin>
	        </Content>
	      </Layout>
      	<Footer className="layoutfooter"><FooterMsg /></Footer>
    	</Layout>
		)
	}
}

const AccountAppeal = Form.create()(AccountAppealForm);
export default AccountAppeal;